<template>
  <div id="modify">
    <div class="main">
      <div class="main-top">
        <img class="logo" src="https://19jwshow.oss-cn-shenzhen.aliyuncs.com/wdad/logo/LOGO.png" alt="">
        <p class="ceremony">已验证用户名</p>
        <p class="appellation">修改你的登录密码</p>
      </div>
      <div class="form">
        <p class="username">密码</p>
        <a-input-password v-model:value="password" placeholder="Basic usage"/>
        <p class="username">确认密码</p>
        <a-input-password v-model:value="conPassword" placeholder="input password"/>
        <div class="sign">
          <span class="phone">密码为8-16位数字和英文组合</span>
          <button class="button" @click="submit"><span>修改</span></button>
        </div>
      </div>
      <div class="main-footer">
        <p class="make">网站制作</p>
        <p class="explain">Website Design And Development</p>
        <p class="copy">2021-2022&copy;网站设计与开发项目组</p>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, getCurrentInstance, ref} from 'vue'
import {message} from 'ant-design-vue';
import router from "../../router";

export default defineComponent({
  name: 'loginModifyPass',
  setup() {
    const password = ref('');
    const conPassword = ref('');
    const pwdReg = /^(?![^a-zA-Z]+$)(?!\\D+$).{8,16}$/;
    //登录点击事件
    const submit = () => {
      if (conPassword.value == "" || password.value == "") {
        message.warning(
            '密码与确认密码不得为空',
            3,
        );
      } else if (!pwdReg.test(password.value)) {
        message.warning(
            '密码格式不正确',
            3,
        );
      } else if (conPassword.value != password.value) {
        message.error(
            '密码与确认密码不一致:(',
            3,
        );
      } else {
        proxy.$request('put', "/api/v1/user/password", {
          "password": password.value,
          "confirmPassword": conPassword.value
        }).then(res => {
          console.log(res)
          proxy.$request('get', '/api/v1/role/route', {})
              .then(res => {
                switch (res.data.is_first) {
                  case"1":
                    message.success(
                        '修改成功，请绑定手机号',
                        3,
                    );
                    password.value = ''
                    conPassword.value = ''
                    router.replace('/login/loginBindingPass');
                    break;
                  case "2":
                    message.success(
                        '修改成功',
                        3,
                    );
                    router.replace('/home');
                    break;
                    default :
                      message.error(
                          '系统错误, 请重新尝试',
                          3,
                      );
                      router.push('/login/loginUser');
                }
              })
        })
      }
    }
    let {proxy} = getCurrentInstance();
    return {
      password,
      conPassword,
      submit,
    }
  },
});
</script>

<style lang="less">
#modify {
  display: flex;

  .main .main-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }


  .main .ceremony {
    width: 100%;
    text-align: center;
    color: #98A6AD;
  }

  .main .appellation {
    width: 100%;
    text-align: center;
    font-weight: bold;
  }


  .main .form p {
    font-weight: bold;
    line-height: 30px;
    font-size: 14px;
    margin: 0;
  }

  .main .form input {
    height: 45px;
    border-radius: 8px;
    margin-bottom: 28px;
  }

  .main .form .ant-input-password {
    border-radius: 8px;
    margin-bottom: 28px;
  }

  .main .form .ant-input-password .ant-input {
    margin: 0;
    height: 35px;
  }

  .main .form .pass .ant-inputt {
    height: 35px;
    margin: 0;
  }

  .main .form .checkbox {
    color: black;
  }

  .main .form .checkbox {
    margin-left: 10px;
    font-weight: lighter;
    margin-top: 7px;
    display: block;
  }

  .main .form .check {
    height: 30px;
    display: flex;
  }

  .form .sign {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10%;
  }

  .form .sign .phone {
    color: #6777EF;
    font-size: 14px;
  }

  .ant-btn {
    width: 76px;
    height: 44px;
    background: #6777EF;
    box-shadow: 0 2px 6px 1px rgba(182, 191, 255, 0.800000011920929);
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    border: 1px solid #6777EF;

  }

  .ant-btn:hover {
    background-color: #3C50E1;
  }

  .ant-btn span {
    color: #fff;
  }

  .main-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .main-footer p {
    width: 100%;
    text-align: center;
  }

  .main-footer .make {
    color: #98A6AD;
  }
  .main-footer .copy {
    font-weight: lighter;
  }
  .main-footer .explain {
    font-weight: bold;
    line-height: 5px;
  }

}

</style>